<template>
	<view>
		<view class="">
			{{count}}
		</view>
		<view class="">
			{{list}}
		</view>
		<view class="">
			{{newList}}
		</view>
		<view class="action">
			<button @click="change" type="primary"> 修改</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		// vue3 需要重点掌握的组合式 api( 函数 )
		ref,
		computed,
		watch,
		onMounted
	} from 'vue'
	// 1.  定义 data 变量 =>  语法：const  变量名 = ref(  默认值 )
	const count = ref(1)
	const list = ref([1, 2, 3])

	// 2.  定义方法
	const change = () => {
		count.value++
		list.value.push(Math.random() + 10)
	}
	// 3. 计算属性 =》根据一个已有变量计算得到一个==新变量==
	const newList = computed(() => {
		return list.value.filter(item => item > 2)
	})

	// 4.  监听属性 =》监听变量变化了，干事儿！！！
	watch(count, (newVal, oldVal) => {
		console.log('count 变化了：', newVal, oldVal)
	})
	watch(list, (newVal, oldVal) => {
		console.log('list 变化了：', newVal, oldVal)
	}, {
		deep: true, // 深度监听
		immediate: true //  页面加载后监听函数立即执行一次
	})
</script>

<style lang='scss' scoped>

</style>